<template>
	<view class="body">
		<view class="system">
			<view class="system-nav" @click="systemchlick">
				<u-avatar shape="square" size="35" icon="volume" fontSize="26" bgColor="#448aca"></u-avatar>
				<text class="system-text">系统消息</text>
			</view>
			<view class="box" v-if="SystemValue > 0">
			 <u-badge numberType="overflow" type="error" max="99" :value="SystemValue"></u-badge>
			</view>
			<u-line margin="10px 0px 0px 0px" hairline="true"></u-line>
		</view>
		<view class="user">
			<view class="user-nav" @click="userchlick">
				<u-avatar shape="square" size="35" icon="man-add-fill" fontSize="26" bgColor="#50f3af"></u-avatar>
				<text class="user-text">新的朋友</text>
			</view>
			<view class="box" v-if="UserValue > 0">
			 <u-badge numberType="overflow" type="error" max="99" :value="UserValue"></u-badge>
			</view>
			<u-line margin="10px 0px 0px 0px" hairline="true"></u-line>
		</view>
		<!-- 好友列表分割线-->
		<view class="user-divider">
			<u-divider text="好友列表"></u-divider> 
		</view>
		<!-- 加载好友列表 -->
		<view class="userlist" v-if="islogin" v-for="(item) in UserList" :key="item.id"> 
			<view class="userlist-nav" @touchstart="touchstartE()" @touchend="touchendE(item)">
				<u-avatar class="img-avatar" shape="square" size="35" :src="item.img" fontSize="26"></u-avatar>
				<text class="userlist-text">{{item.name}}</text> 
				<!-- 获取最后一条消息 -->
				<text class="indexmessage" v-if="item.lastmessage != null">{{item.lastmessage}}</text>
			</view>
			<!-- 用户消息提示图标 -->
			<view class="box" v-if="item.totalMessage > 0">  
			 <u-badge numberType="overflow" type="error" max="99" :value="item.totalMessage"></u-badge>  
			</view>
			<u-line margin="10px 0px 0px 0px" hairline="true"></u-line>
		</view>
		<view class="bottom"> 
			<u-divider text="我是有底线的"></u-divider>    
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				total:10,
				SystemValue:1,
				UserValue:2,
				islogin:true,
				userid :"", //登录用户id
				clickOrlongtap:false,//判读用户是点击还是长按
				UserList:[],//用户好友列表
				touchT: '', // 触屏开始时间
				touchE: '', // 触屏结束时间
				systemList:[],//系统消息
				messageList:[],//用户消息
				message:{
					
				}
			}
		},
		onLoad() {
			this.onSystem()//监听消息
		},
		onShow() {
			//先查询本地缓存判断用户是否登录，登录再建立连接
			const user = uni.getStorageSync('user')
			if(user){
				this.islogin = true 
				this.userid = JSON.parse(user).id
				var str = uni.getStorageSync("userfriendlist")
				if(typeof str == 'string' & str.length == 0 & str == ""){
					this.userlist()
				}else{ 
					this.UserList = JSON.parse(str)
				} 
				//获取消息记录
				var system = uni.getStorageSync("system") 
				if(typeof system == 'string' && system.length > 0){
					this.systemList = JSON.parse(uni.getStorageSync("system"))
				}
				var message = uni.getStorageSync("message")
				if(typeof message == 'string' && message.length > 0){
					this.messageList = JSON.parse(uni.getStorageSync("message"))
				} 
			}else{
				uni.$u.toast("您还未登录，登录后开启聊天信息")
				this.islogin = false
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			//从新加载好友列表信息到缓存
			console.log("监听到下拉刷新")
			this.userlist()
		},
		methods:{
			//监听接收消息方法 
			onSystem(){ 
				uni.$on("system",res=>{
					//设置tabbar
					var str = uni.getStorageSync("tabbar")
					var num = parseInt(str)
					console.log("show监听到num"+num)
					if(typeof str == 'string' & str.length != 0){
						if(num > 0){
							uni.setTabBarBadge({ //显示数字
								index: 1, //tabbar下标
								text:""+num,//数字
								success() {
								console.log("设置成功") 
								},
								fail(e){ 
								   console.log("设置失败"+JSON.stringify(e))
								}
							})
							//更新缓存
							uni.setStorageSync("tabbar",JSON.stringify(num))
							this.$forceUpdate()
						}
					} 
					console.log("see收到了消息"+JSON.stringify(res.message))
					//更新用户最后一条信息和总的消息数缓存
					for(var i = 0;i< this.UserList.length;i++){
						if(res.sendUser == this.UserList[i].id){
							this.$set(this.UserList[i],"lastmessage",res.message)
							var num = this.UserList[i].totalMessage
							this.$set(this.UserList[i],"totalMessage",++num)
							//更新缓存
							var str = this.UserList
							uni.setStorageSync("userfriendlist",JSON.stringify(str))
							this.$forceUpdate()
							break
						}
					}
					//将收到的信息
				})
			},
			//重新加载好友列表
			userlist(){
				const user = uni.getStorageSync('user')
				if(user.length > 0 & user != ""){
					var userid = JSON.parse(user).id
						//从新加载好友列表信息到缓存
						uni.request({
							url:"http://localhost:8081/user/getuserlist/"+userid,
							method:"GET",
							complete:(res)=> {
								if(res.data.code == 20021){
									this.UserList = res.data.date
									uni.setStorageSync("userfriendlist",JSON.stringify(res.data.date))
									uni.$u.toast("获取用户列表成功")
								}else{
									uni.$u.toast("获取用户列表失败，请下拉刷新重试")
								}
							}
						})
				}else{
					uni.$u.toast("您还未登录，登录后开启聊天信息")
				}
			},
			systemchlick(){
				console.log("系统消息")
			},
			userchlick(){
				console.log("好友消息")
			},
			userlistchlick(e){
				//tabber消息个数减去对应的数量
				var str = uni.getStorageSync("tabbar")
				if(typeof str == 'string' & str.length > 0 & str != "null"){
					var num = parseInt(str)
					num = num - e.totalMessage 
					if(num <= 0){ 
						uni.removeTabBarBadge({
							index:1 
						})
					}else{
						uni.setTabBarBadge({ //显示数字
							index: 1, //tabbar下标
							text:""+num,//数字
							success() {
							console.log("设置成功") 
							},
							fail(e){ 
							   console.log("设置失败"+JSON.stringify(e))
							}
						})
					}
					uni.setStorageSync("tabbar",JSON.stringify(num))
				}
				//清楚用户列表消息提示
				for(var i = 0;i< this.UserList.length;i++){
					if(e.id == this.UserList[i].id){
						var num = this.UserList[i].totalMessage
						this.$set(this.UserList[i],"totalMessage",0)
						//更新缓存
						var str = this.UserList
						uni.setStorageSync("userfriendlist",JSON.stringify(str))
						this.$forceUpdate()
						break
					}
				}
				uni.navigateTo({
					url:"/pages/see/chatpage"+"?id="+e.id+"&name="+e.name+"&img="+e.img
				})
			},
			getmessage(msg){
				console.log(msg)
			},
			longtap(){
				console.log("触发了长按事件")
			},
			//用户触摸屏幕开始时间
			touchstartE(){
				this.touchT = new Date().getTime();
			},
			//用户触摸结束事件
			touchendE(item) {
				this.touchE = new Date().getTime();
				//判断
				var timp = this.touchE - this.touchT
				if(timp >= 500){
					this.longtap()
				}else{
					this.userlistchlick(item)
				}
			},
			
		}
	}
</script>

<style>
	@import url("@/static/css/see.css");
</style>